<!--  -->
<template>
  <a-upload
    v-model:file-list="fileList"
    name="fileData"
    list-type="picture-card"
    class="avatar-uploader"
    :show-upload-list="false"
    :action="config.vpUrl + '/moses/upload/file/upload'"
    :before-upload="beforeUpload"
    @change="handleChange"
  >
    <a-spin :spinning="loading" tip="上传中...">
      <img v-if="imgUrl" :src="imgUrl" alt="avatar" />
      <!-- :style="imgData" -->
      <div v-if="!imgUrl && !loading">
        <UploadOutlined />
      </div>
      <p v-if="!loading && size">建议尺寸：{{ size }}</p>
    </a-spin>
  </a-upload>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import { PlusOutlined, LoadingOutlined, UploadOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import { getBase64 } from '@/utils/common'
import config from '@/config/index'
interface FileItem {
  uid: string
  name?: string
  status?: string
  response?: any
  url?: string
  type?: string
  size: number
  originFileObj: any
}

interface FileInfo {
  file: FileItem
  fileList: FileItem[]
}
export default defineComponent({
  components: {
    UploadOutlined,
    LoadingOutlined,
    PlusOutlined
  },
  props: {
    //图片建议上传尺寸
    size: {
      default: '',
      type: String
    },
    //图片链接
    imgUrl: {
      default: '',
      type: String
    }
  },
  emits: ['update:imgUrl'],
  setup(props, ctx) {
    const fileList = ref([])
    const loading = ref<boolean>(false)
    let imgData = ref('')

    const handleImgClac = () => {
      if (props.size) {
        let sizeData = props.size.split('*')
        console.log(
          '%c 🥪 sizeData: ',
          'font-size:20px;background-color: #FFDD4D;color:#fff;',
          sizeData
        )
        let w = ~~sizeData[0]
        let h = ~~sizeData[1]
        if (w > 220 || h > 104) {
          w = w * 0.6
          h = h * 0.6
          imgData.value = `width: ${w}px;height: ${h}px`
          console.log(
            '%c 🥗 imgData: ',
            'font-size:20px;background-color: #6EC1C2;color:#fff;',
            imgData
          )
        }
      }
    }
    // handleImgClac()
    const handleChange = (info: FileInfo) => {
      console.log('%c 🍣 info: ', 'font-size:20px;background-color: #42b983;color:#fff;', info)
      if (info.file.status === 'uploading') {
        loading.value = true
        return
      }
      if (info.file.status === 'done') {
        loading.value = false
        ctx.emit('update:imgUrl', info.file.response.dataInfo.url)
      }
      if (info.file.status === 'error') {
        loading.value = false
        message.error('upload error')
      }
    }

    const beforeUpload = (file: FileItem) => {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
      if (!isJpgOrPng) {
        message.error('请上传jpg,jpeg,png图片格式')
      }
      const isLt4M = file.size / 1024 / 1024 < 4
      if (!isLt4M) {
        message.error('图片最大不超过4M')
      }
      return isJpgOrPng && isLt4M
    }
    return {
      config,
      fileList,
      loading,
      handleChange,
      beforeUpload,
      imgData
    }
  }
})
</script>
<style lang="scss">
.ant-card-body {
  .anticon-plus {
    display: none;
  }

  img {
    object-fit: cover;
    max-width: 220px;
    max-height: 104px;
  }

  .ant-upload-picture-card-wrapper {
    p {
      font-size: 12px;
      color: #ccc;
    }

    .ant-upload-select-picture-card {
      width: 220px;
    }
  }
}
</style>
